<template>
	<view :class="['z-input', zClass, borderNone?'border-none':'']">
		<view v-if="title" class="title">{{title}}</view>
		<input
			class="input"
			:placeholder="placeholder"
			:type="type"
			v-model="val"
			@blur="onInput"
			@confirm="onInput"
		/>
	</view>
</template>

<script>
	export default{
		props: {
			'zClass':{type:String},
			'title':{type:String},
			'placeholder':{type:String},
			'type':{type:String, default:'text'},
			'value':{type:null, default:''},
			'borderNone':{type:Boolean}
		},
		data(){
			return{
				val:this.value
			}
		},
		methods:{
			onInput(e){
				this.$emit('input', this.val)
			}
		}
	}
</script>

<style lang="scss">
	.z-input{
		display: flex;
		align-items: center;
		min-height: $form-cell-min-height;
		padding: 15upx 0;
		border-bottom: solid 1rpx $border-color;
		.title{
			margin-right: 30upx;
			flex: 0 0 120upx;
		}
		.input{
			flex: 1 0 auto;
			border: 0;
			outline: 0;
			font-size: $font-size-base;
		}
		&.border-none{
			border:0;
		}
	}
</style>
